<script setup>
 import { RouterView,RouterLink } from 'vue-router'

import { ref } from 'vue';

import { useCartStore } from '../../stores/cart';

const cartStore = useCartStore()

</script>

<template>
    <div class="home">
        <main>
            <RouterView />
        </main>
        <footer>
          <van-tabbar active-color="#ee0a24" route>
            <van-tabbar-item icon="wap-home-o" to="/child1">配送到家</van-tabbar-item>
            <van-tabbar-item icon="cart-o" to="/child2" :badge="cartStore.total.count">购物车</van-tabbar-item>
            <van-tabbar-item icon="manager-o" to="/child3">我的</van-tabbar-item>
          </van-tabbar>
        </footer>
    </div>

</template>

<style>
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  overflow: auto;
}
footer {
  height: 50px;
  border-top: 1px solid;
  display: flex;
}
footer a {
  flex: 1;
  text-align: center;
  line-height: 50px;
}
.router-link-active  {
  background: orange;
}

</style>
